<template>
  <div class="page-container">
    <!-- 极具视觉冲击力的轮播图 -->
    <van-swipe
      v-model="activeIndex"
      :autoplay="3000"
      indicator-color="#fff"
      :style="swipeStyle"
      class="swipe-container"
      :key="swipeKey" 
      @change="handleSwipeChange"
    >
      <van-swipe-item v-for="(item, index) in swipeList" :key="index">
        <div class="swipe-content">
          <img :src="item.img" alt="轮播图" class="swipe-img" />
          <div class="swipe-text">
            <h3>{{ item.title }}</h3>
            <h3>{{ item.title1 }}</h3>
            <van-button type="primary" size="mini" @click="handleJoin">立即参与</van-button>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <!-- 科技感十足的滑动标签 -->
    <van-tabs v-model="tabActive" swipeable class="tabs-container">
      <van-tab title="最热">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in hotList"
            :key="index"
            :title="item.title"
            :thumb="item.thumb"
            @click="handleItemClick(item)"
            class="list-item"
          >
            <template #footer>
              {{ item.contentCount }}内容·{{ item.participantCount }}人参与
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="最新">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in newList"
            :key="index"
            :title="item.title"
            :thumb="item.thumb"
            @click="handleItemClick(item)"
            class="list-item"
          >
            <template #footer>
              {{ item.contentCount }}内容·{{ item.participantCount }}人参与
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

import img12 from '../../../src/assets/12.png';  // 导入图片  
import img13 from '../../../src/assets/13.png';  
import img14 from '../../../src/assets/14.png';  
import img15 from '../../../src/assets/15.png';  
import { useRouter } from 'vue-router';
const router = useRouter();
const activeIndex = ref(0);
const tabActive = ref('最热');
const swipeKey = ref(0);  // 用于强制更新的key

// 轮播图数据（保持不变）
const swipeList = ref([
  {
    img: img12,
    title: '时尚科技轻松拥有\n实惠价格开启潮流之旅',
    title1: '官方正品 在线选购',
  },
  {
    img: img13,
    title: '智能家电新体验 开启便捷品质生活',
    title1: '品类齐全 现货热销',
  },
  {
    img: img14,
    title: '宅家刷具好伴侣 休闲零食美味升级',
    title1: '全网低价 显示直降',
  },
  {
    img: img15,
    title: '春节女装来袭 服饰新风尚 ',
    title1: '大牌女装男装 天天领满减',
  }
]);

// 动态计算的轮播图样式（保持不变）
const swipeStyle = computed(() => ({
  height: `${window.innerWidth * 0.4}px`
}));

// 最热内容（关键修改部分）
const hotList = ref([
  {
    title: '智能手机',
    thumb: img15,  // 更换为数码相机图片
    contentCount: '231w',
    participantCount: '1.2w'
  },
  {
    title: '美妆',
    thumb: img12,  // 更换为美妆图片
    contentCount: '231w',
    participantCount: '1.2w'
  },
  {
    title: '时尚',
    thumb: img13,
    contentCount: '23.1w',
    participantCount: '1.2w'
  },
  {
    title: '旅游',
    thumb: img14,
    contentCount: '23.1w',
    participantCount: '1.2w'
  },
  {
    title: '摄影',
    thumb: img15,
    contentCount: '23.1w',
    participantCount: '1.2w'
  },
]);

// 最新内容（关键修改部分）
const newList = ref([
  {
    title: '摄影',
    thumb: img15,
    contentCount: '32.3w',
    participantCount: '3.5w'
  },
  {
    title: '香水',
    thumb: img14,
    contentCount: '35.3w',
    participantCount: '5.5w'
  },
  {
    title: '配饰',
    thumb: img12,
    contentCount: '45.5w',
    participantCount: '6.6w',
  },
  {
    title: '数码相机',
    thumb: img15,  // 统一使用数码相机图片
    contentCount: '46.6w',
    participantCount: '7.7w',
  },
  {
    title: '美妆',
    thumb: img12,  // 统一使用美妆图片
    contentCount: '66.9w',
    participantCount: '5.5w',
  }
]);

// 事件处理函数（保持不变）
const handleSwipeChange = (index) => {
  activeIndex.value = index;
  console.log(`切换到第 ${index + 1} 张轮播图`);
};

const handleJoin = () => {
  router.push('/activity');
  console.log('参与活动功能已触发');
};

const handleItemClick = (item) => {
  router.push({ 
    path: '/detail', 
    query: { id: item.id } 
  });
};

onMounted(() => {
  swipeKey.value++;
  
  const checkImageLoad = () => {
    const images = document.querySelectorAll('.swipe-img');
    images.forEach(img => {
      if (!img.complete) {
        console.error('图片加载失败:', img.src);
      }
    });
  };
  checkImageLoad();
});
</script>

<style scoped>
.page-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.swipe-container {
  position: relative;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.swipe-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.swipe-content:hover .swipe-img {
  transform: scale(1.02);
}

.swipe-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.swipe-text h3 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
}

.tabs-container {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.list-item {
  margin: 12px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.list-item:hover {
  transform: translateY(-5px);
}

.van-cell__title {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.van-cell__footer {
  font-size: 14px;
  color: #666;
}
</style>